<!DOCTYPE html>
<html>
<head>
<title>Leaflet.label example</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet-src.js" crossorigin=""></script>

<script src="dist/L.LabelTextCollision.js"></script>

<script src="data.js" charset="utf-8"></script>
</head>
<body>
    <div id="map" style="width: 60%; height: 600px"></div>
    <br>
    <input type="checkbox" checked onclick="setCollisionDetection(this.checked)"> Collision detection
    <script>
                    var osmUrl = 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png'
                    var osmAttrib = 'Map data  <a href="http://openstreetmap.jp">OpenStreetMap</a> contributors';
                    var osm = new L.TileLayer(
                            osmUrl, {
                                maxZoom : 18,
                                attribution : osmAttrib
                            });

                    var labelTextCollision = new L.LabelTextCollision({
                            collisionFlg : true
                        });

                    var map = new L.Map('map', {
                        layers : [ osm ],
                        center : new L.LatLng(35.695786, 139.749213),
                        zoom : 10,
                        renderer : labelTextCollision
                    });

                    var p = L.polyline(
                            [ [ 35.695786, 139.749213 ],
                                    [ 35.696786, 139.748213 ],
                                    [ 35.695786, 139.747213 ] ], {
                                weight : 12,
                                color : '#fe57a1',
                                text : 'Leaflet.LabelTextCollision!!!!!!!!'
                            }).addTo(map);

                    var layers = L.featureGroup().addTo(map);

                    for ( var index in data) {
                        var d = data[index];
                        var latlng = L.latLng(d[0], d[1]);
                        var c = L.circleMarker(latlng, {
                            radius : 5,
                            text : latlng.toString()
                        });
                        layers.addLayer(c);
                        if (index == 3000) {
                            break;
                        }
                    }

                    function setCollisionDetection(flg) {
                        labelTextCollision.options.collisionFlg = flg;
                        map.fitBounds(map.getBounds());
                    }
                </script>
</body>
</html>
